<template>
    <div class="authorityList">
        <!-- 筛选bar -->
        <div class="filter-bar">
            <el-row :gutter="10">
                <el-col :span="4">
                    <el-input placeholder="医院管理员名称" v-model="admin_name"  class="input-with-select"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="h_id" placeholder="请选择">
                        <el-option
                                v-for="item in hospitalList"
                                :key="item.hi_id"
                                :label="item.hi_name"
                                :value="item.hi_id"
                        >
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary"  @click="handleKeywordFilter">搜索</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="table">
            <el-table :data="tableData" height="438"  v-loading="loading" stripe>
                <el-table-column label="编号" type="index" :index="indexMethod">
                </el-table-column>
                <el-table-column label="管理员姓名">
                    <template slot-scope="scope">
                        <span>{{ scope.row.admin_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="管理的医院" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ hospitalSelectList[scope.row.h_id] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="管理员账号">
                    <template slot-scope="scope">
                        <span>{{ scope.row.admin_id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="管理员权限">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.admin_role" :active-value="1" :inactive-value="0" active-color="#3464ca" inactive-color="#f2f2f2" active-text="开" inactive-text="关" :disabled="!scope.row.h_id || scope.row.admin_id == '20210001'"  @click.native ="filterSwitch(scope.row)">
                        </el-switch>
<!--                        <span>{{ scope.row.admin_role }}</span>-->
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope" >
                        <el-button type="text" @click="set(scope.row)" v-show="scope.row.admin_id != 20210001">编辑详情</el-button>
<!--                        <el-button type="text" @click="deleteAdmin(scope.row.admin_id)"-->
<!--                        >删除</el-button-->
<!--                        >-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination @current-change="getDepartmentListByPage" :current-page.sync="pageIndex" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {authorityListGet,authorityUpdate} from "../../api/authority";
    import {hospitalSelect} from "../../api/hospital";

    export default {
        name: "list",
        data() {
            return {
                loading:false,
                admin_name:'',
                h_id:'',
                tableData:[],
                hospitalList:[],
                pageIndex: 1, //默认显示第一页
                pageSize: 6, //每页显示
                total: 0,
                dialogVisible:false,
                hospitalSelectList:{
                    // 10000:'超管',
                    // 10001:'测试医院一',
                    // 10002:'测试医院二',
                    // 10003:'测试医院三'
                }
            }
        },

        created() {
            this.getList();
        },

        mounted() {

        },

        methods: {
            handleKeywordFilter(){
                this.getList();
            },
            async getList(){
                try{
                    let {list} = await hospitalSelect({
                        pageIndex:this.pageIndex,
                        pageSize:1000,
                    })
                    list.unshift({
                        hi_id:"",
                        hi_name:"全部"
                    })
                    list.map(item=>{
                        this.hospitalSelectList[item.hi_id] = item.hi_name;
                    })
                    this.hospitalList = list
                    console.log(this.hospitalList,'hospitalList')
                    let res = await authorityListGet({
                        pageIndex:this.pageIndex,
                        pageSize:this.pageSize,
                        admin_name:this.admin_name,
                        h_id:this.h_id,
                    });
                    console.log(res,'用户信息');
                    this.tableData = res.list;
                    this.total = res.total;
                }catch (e) {
                    console.error(e);
                }
            },
            handleKeywordFilter(){
                this.getList();
            },
            indexMethod(index) {
                return index + (this.pageIndex - 1) * this.pageSize + 1;
            },
            getDepartmentListByPage(){
                this.getList();
            },
            set(row){
                this.$router.push({
                    path: "detail",
                    query: {
                        id: row.admin_id,
                    },
                });
                console.log(row)
            },
            deleteAdmin(id){
                console.log(id)
            },
            async filterSwitch(row){
                try{
                    let res = await authorityUpdate({
                        admin_id:row.admin_id,
                        admin_role:row.admin_role
                    })
                    if(row.admin_role){
                        this.$message.success('权限开启成功！')
                    }else{
                        this.$message.success('权限关闭成功！')
                    }
                    this.getList();
                }catch (e) {
                    this.$message.error('权限开启失败！')
                }

            }
        },
    }
</script>

<style lang='scss'>
    .authorityList {
        height: 100%;
        position: relative;
        background: #fff;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        margin: 0 20px 0 20px ;
        .filter-bar {
            width: 100%;
            margin-bottom: 10px;
            .el-row {
                .el-col {
                    > div {
                        width: 100%;
                    }
                }
                .el-col-5 {
                    max-width: 180px;
                }
                .el-col-9 {
                    max-width: 440px;
                }
            }
        }
        .table{
            margin-top: 20px;
            height: auto;
            .el-table {
                width: 100%;
                height: 100%;
                margin-top: 10px;
                font-size: 14px;
                /*min-height: calc(100% - 88px);*/
            }
        }
        .page{
            margin-top: 20px;
            .el-pagination{
                text-align: center;
            }
        }
    }
</style>